<template>
<div>
	<mt-button type="primary" size="large" @click="sheetVisible = true">
    选择操作
 </mt-button>
  <mt-actionsheet cancel-text=""  :actions="actions"  v-model="sheetVisible">
  </mt-actionsheet>
 <mt-navbar v-model="selected">
  <mt-tab-item id="1">选项卡1</mt-tab-item>
  <mt-tab-item id="2">选项卡2</mt-tab-item>
  <mt-tab-item id="3">选项卡3</mt-tab-item>
</mt-navbar>
<br/>
<!-- tab-container -->
<mt-tab-container :active.sync="selected" v-model="selected">
  <mt-tab-container-item id="1">
    <mt-cell v-for="n in 10" :title="'content ' + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <mt-cell v-for="n in 4" :title="'content ' + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <mt-cell v-for="n in 6" :title="'content ' + n" />
  </mt-tab-container-item>
</mt-tab-container>
</div>
</template>

<script>
  import { Toast, MessageBox,Navbar, TabItem  } from 'mint-ui';
  import 'mint-ui/lib/style.css';

  export default {
    data() {
      return {
        sheetVisible: false,
        selected:true,
        actions: [{
          name: '展示 Toast',
          method: this.showToast
        }, {
          name: '展示 Message Box',
          method: this.showMsgbox
        }]
      };
    },

    methods: {
      showToast() {
        Toast('这是一个 Toast');
      },

      showMsgbox() {
        MessageBox('提示', '这是一个 Message Box');
      }
    }
  };
</script>